<template>
  <div class="product_page">
    <!-- 侧边浮窗 -->
    <div class="float">
      <img
        alt=""
        class="packet"
        src="../../../assets/mallImg/红包.png"
        style="cursor: pointer"
      />
      <div class="float_bt">
        <div class="tit">
          <img alt="" src="../../../assets/mallImg/用户中心.png" />
          <p>用户中心</p>
        </div>
        <div class="tit">
          <img alt="" src="../../../assets/mallImg/购物车.png" />
          <p>购物车</p>
        </div>

        <div class="tit">
          <img alt="" src="../../../assets/mallImg/收藏.png" />
          <p>我的收藏</p>
        </div>

        <div class="tit" @click="toTop">
          <img alt="" src="../../../assets/mallImg/置顶.png" />
          <p>返回顶部</p>
        </div>
      </div>
    </div>

    <div class="product">
      <div class="product_top">
        <div class="product_left">
          <img alt="" src="../../../assets/mallImg/product_item.png" />
        </div>
        <div class="product_right">
          <div class="title">
            <p>轴承 QJ228 N2MA</p>
          </div>
          <div class="content">
            <div class="left">
              <span>河钢专供</span>
            </div>
            <div class="right">
              <span>传递运动的力量</span>
            </div>
          </div>
          <div class="product_price">
            <div class="left">
              <span>售价</span>
              <span>￥ {{ price ? price : unitPrice }}</span>
            </div>
            <div class="right">
              <img
                alt=""
                src="../../../assets/mallImg/share.png"
                style="cursor: pointer"
                @click="handleShare"
              />
              <div class="line"></div>
              <div class="btn" style="cursor: pointer" @click="handleLike">
                领取优惠券
              </div>
            </div>
          </div>
          <div class="lline"></div>
          <div class="product_count">
            <div class="count_tit">数量</div>
            <div class="Inum">
              <el-input-number
                v-model="num"
                :max="limit"
                :min="1"
                label="描述文字"
                size="small"
                style="width: 180px; height: 40px"
                @change="handleChange"
              ></el-input-number>
            </div>
            <div class="stock">
              <span>库存：{{ stock }}件</span>
            </div>
            <div class="limit">
              <span>限购：{{ limit }}件</span>
            </div>
          </div>
          <el-button class="el_button" @click="handleShop">我要购买</el-button>
        </div>
      </div>
      <div class="view_list">
        <ul>
          <li @click="last">
            <img alt="" src="../../../assets/mallImg/left.png" />
          </li>
          <li v-for="item in viewList" :key="item.id" @click="hanfleView(item)">
            <img
              alt=""
              src="../../../assets/mallImg/itemOne.png"
              style="width: 78px"
            />
          </li>
          <li @click="next">
            <img alt="" src="../../../assets/mallImg/right.png" />
          </li>
        </ul>
      </div>
      <div class="collect">
        <img
          alt=""
          src="../../../assets/mallImg/star.png"
          style="cursor: pointer"
          @click="handleCollect"
        />
        <span>收藏宝贝（人气{{ popularity }}）</span>
      </div>
    </div>

    <!-- 店长推荐 -->
    <div class="recommend">
      <div class="recommend_title">
        <div class="img">
          <img
            alt=""
            src="../../../assets/mallImg/店长推荐.png"
            style="width: 1240px"
          />
        </div>
      </div>
      <div class="recommend_items">
        <div v-for="item in 5" :key="item" class="recommend_item">
          <img alt="" src="../../../assets/mallImg/推荐.png" />
          <p>¥ 4698.65</p>
        </div>
      </div>
    </div>
    <!-- 商品介绍 -->
    <div class="introduce">
      <div class="introduce_left">
        <div class="left_title">
          <img alt="" src="../../../assets/mallImg/logo.png" />
          <p>河间轴承官方店</p>
        </div>
        <div class="left_content">
          <p style="margin-top: 0">
            <span>联系：</span
            ><img alt="" src="../../../assets/mallImg/和我联系.png" />
          </p>
          <p>
            <span>信誉：</span>
            <el-rate
              v-model="value1"
              disabled
              score-template="{value}"
              show-score
              style="display: inline-block"
              text-color="#ff9900"
            ></el-rate>
          </p>
          <p><span>累计评价：</span>4000</p>
          <p><span>销量：</span>4000</p>
          <div class="left_btn">
            <el-button class="bu_btn">进店逛逛</el-button>
            <el-button class="bu_btn">关注店铺</el-button>
          </div>
        </div>
      </div>
      <div class="introduce_right"></div>
    </div>
    <div class="bottom"></div>
    <!-- Dialog使用 -->
    <dt-dialog
      :is-loading="loading"
      :title="title"
      :visible.sync="dialogVisible"
      footerSlot
      width="400px"
    >
      <p>优惠券</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetTemp">取 消</el-button>
        <el-button @click="submitForm">领取优惠券</el-button>
      </span>
    </dt-dialog>
  </div>
</template>

<script>
export default {
  name: "productDetail",
  /* 注册组件 */
  components: {},

  /* 数据 */
  data() {
    return {
      value1: 3.5,
      dialogVisible: false,
      isFullScreen: false,
      title: "领取优惠券",
      loading: false,
      // 单价
      unitPrice: 1000.0,
      // 售价
      price: 0,
      // 数量
      num: 1,
      // 库存
      stock: 10000,
      // 限购
      limit: 99,
      // 人气
      popularity: 2448,
      activeName: "second",
      label: "@/assets/product_item.png",
      viewList: [
        {
          id: 1,
          url: "@/assets/itemOne.png",
        },
        {
          id: 2,
          url: "@/assets/itemTwo.png",
        },
        {
          id: 3,
          url: "@/assets/itemThree.png",
        },
        {
          id: 4,
          url: "@/assets/item.four.png",
        },
      ],
      nextId: 1,
    };
  },

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  /* 方法 */
  methods: {
    handleChange(value) {
      // TODO 当数量发生变化的时候请求接口获取库存
      this.price = this.unitPrice * value;
    },
    hanfleView(item) {
      this.label = item.url;
      this.nextId = item.id;
    },
    last() {
      this.nextId--;
      if (this.nextId < 1) {
        this.nextId = 4;
        this.label = this.viewList.find((item) => item.id === this.nextId).url;
      } else {
        this.label = this.viewList.find((item) => item.id === this.nextId).url;
      }
    },
    next() {
      if (this.nextId > 4) {
        this.nextId = 1;
        this.label = this.viewList.find((item) => item.id === this.nextId).url;
      } else {
        this.nextId++;
        this.label = this.viewList.find((item) => item.id === this.nextId).url;
      }
    },
    toTop() {
      // 滚动回到浏览器顶部
      const that = this;
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5);
        // eslint-disable-next-line no-multi-assign
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    scrollToTop() {
      const that = this;
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 0) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    // 点击收藏
    handleCollect() {
      // TODO 点击收藏
    },
    handleShop() {
      // TODO 点击购买
    },
    handleShare() {
      // TODO 点击分享
      // 提示分享成功
      this.$message({
        message: "分享成功",
        type: "success",
      });
    },
    // 领取优惠券
    handleLike() {
      this.dialogVisible = true;
      // TODO 领取优惠券
    },
    // 提交
    submitForm() {
      // TODO 领取优惠券
      this.$message.success("领取成功");
      this.dialogVisible = false;
    },
    // 关闭弹窗
    resetTemp() {
      this.$message.error("取消领取");
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.product_page {
  margin-top: 180px;
  width: 100%;

  .float {
    position: relative;

    .packet {
      position: fixed;
      width: 110px;
      height: 110px;
      top: 279px;
      right: 20px;
    }

    .float_bt {
      position: fixed;
      top: 429px;
      right: 42px;
      width: 68px;
      height: 331px;
      margin: 0 auto;
      text-align: center;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 0 6px #0000001a;

      .tit {
        // 鼠标变成小手
        cursor: pointer;
      }

      img {
        padding: 0;
        width: 30px;
        height: 30px;
        background: transparent;
        margin-top: 12px;
      }

      p {
        padding: 0;
        margin-top: 0;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #626262;
      }
    }
  }

  .product {
    margin: 0 auto;
    width: 1240px;
    height: 546px;

    .product_top {
      display: flex;
      justify-content: space-between;

      .product_left {
        width: 404px;
        height: 404px;
      }

      .product_right {
        height: 404px;
        width: 812px;

        .title {
          p {
            font-family: "Source Han Sans CN Bold";
            font-weight: 700;
            font-size: 18px;
            text-align: left;
            color: #000;
          }
        }

        .content {
          width: 216px;
          height: 32px;
          background: transparent;
          display: flex;
          justify-content: space-between;

          .left {
            width: 89px;
            height: 32px;
            border-radius: 4px;
            background: #e5f3ff;
            text-align: center;

            span {
              font-family: "Source Han Sans CN";
              // font-weight: 400;
              font-size: 16px;
              line-height: 32px;
              color: #0479db;
            }
          }

          div.right {
            width: 112px;
            height: 32px;

            span {
              font-family: "Source Han Sans CN";
              font-weight: 400;
              font-size: 16px;
              color: #000;
              line-height: 32px;
            }
          }
        }

        .product_price {
          width: 812px;
          height: 73px;
          line-height: 73px;
          border-radius: 4px;
          background: #f5f9fc;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          .left {
            height: 35px;
            margin-left: 20px;

            :nth-child(1) {
              font-family: "Source Han Sans CN";
              font-weight: 400;
              font-size: 18px;
              text-align: left;
              color: #000;
            }

            :nth-child(2) {
              font-family: "Microsoft YaHei Bold";
              font-weight: 700;
              font-size: 26px;
              text-align: left;
              color: #ff6b00;
              margin-left: 28px;
            }
          }

          .right {
            width: 204px;
            height: 32;
            line-height: 32px;
            margin-right: 20px;
            display: flex;

            img {
              width: 28px;
              height: 28px;
              background: transparent;
              margin-top: 22px;
            }

            .line {
              width: 35px;
              height: 29px;
              // line-height: 29px;
              font-size: 20px;
              margin-top: 22px;
              border-right: 1px solid #d3d7db;
              background: #f5f9fc;
            }

            .btn {
              text-align: center;
              width: 105.4px;
              height: 32px;
              background: #be010600;
              border: 1px solid #ed742e;
              margin-top: 22px;
              margin-left: 34.6px;
            }
          }
        }

        .lline {
          margin-top: 20px;
          width: 812px;
          height: 1px;
          background: #fff;
          border: 1px solid #e9e9e9;
        }

        .product_count {
          margin-top: 20px;
          width: 500px;
          height: 40px;
          line-height: 40px;
          background: transparent;
          display: flex;
          margin-bottom: 22.5px;

          .count_tit {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
            margin-right: 17px;
          }

          .Inum {
            margin-right: 25px;
          }

          .stock {
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
            margin-right: 16px;
          }

          .limit {
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
          }
        }

        .el_button {
          width: 146px;
          height: 40px;
          border-radius: 4px;
          background: #1289ff;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          margin-top: 22.5px;
        }
      }
    }

    .view_list {
      width: 404px;
      height: 78px;
      // line-height: 78px;
      margin-top: 15px;

      ul {
        height: 78px;
        padding: 0;
        list-style: none;
        margin-top: 0px;
        // line-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          cursor: pointer;
        }
      }
    }

    .collect {
      height: 24px;
      line-height: 24px;
      background: transparent;
      margin-top: 20px;
      display: flex;

      img {
        width: 24px;
        height: 24px;
        background: transparent;
        display: block;
        margin-top: 4px;
        margin-right: 8px;
      }

      span {
        display: block;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 18px;
        text-align: left;
        margin-top: 4px;
        color: #000;
      }
    }
  }

  .recommend {
    width: 1240px;
    height: 315px;
    margin: 40.27px auto 0;

    .recommend_title {
      width: 1240px;
      height: 29.73px;
      background: transparent;
    }

    .recommend_items {
      width: 1240px;
      height: 261px;
      display: flex;
      justify-content: space-between;

      .recommend_item {
        margin-top: 24px;
        text-align: center;

        img {
          width: 216px;
          height: 216px;
          background: transparent;
          margin: 0;
        }

        p {
          padding: 0;
          font-family: "Source Han Sans CN Medium";
          font-weight: 500;
          font-size: 24px;
          color: #ff6b00;
          margin-top: 9px;
        }
      }
    }
  }

  .bottom {
    width: 1240px;
    height: 800px;
    background: #f9f9f9;
    margin: 0 auto;
    margin-top: 40px;
  }

  .introduce {
    width: 1240px;
    margin: 30px auto;
    margin-bottom: 80px;
    display: flex;
    justify-content: space-between;

    .introduce_left {
      height: 300px;

      .left_title {
        width: 291px;
        height: 50px;
        background: #f9f9f9;
        border: 1px solid #e3e3e3;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 30px;
          height: 30px;
        }

        p {
          font-family: "Source Han Sans CN Medium";
          font-weight: 500;
          font-size: 18px;
          color: #2b2b2b;
          margin-left: 10px;
        }
      }

      .left_content {
        width: 291px;
        height: 250px;
        background: #fff;
        border: 1px solid #d8d8d8;
        padding: 20px;

        p {
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 18px;
          text-align: left;
          color: #2b2b2b;
        }

        .left_btn {
          margin: 0 auto;
          text-align: center;

          .bu_btn {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            color: #1289ff;
            width: 115px;
            height: 40px;
            border-radius: 20px;
            background: #f7fbff;
            border: 1px solid #3f87f7;
          }
        }
      }
    }

    .introduce_right {
      width: 925px;
      height: 300px;
      border: 1px solid red;
    }
  }
}
</style>
